<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-select v-model="searchDto.status" clearable placeholder="申请状态">
          <el-option v-for="item in applicationStatusList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="roleType === '1' || roleType === '4'">
        <el-input placeholder="YSTSN" v-model="searchDto.ystsn"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData()">查询</el-button>
      </el-form-item>
    </el-form>

    <custom-table
      :columns="columns"
      :data="factoryScrapList"
      :tableLoadingFlag="tableLoadingFlag"
      :operationColumn="operationColumn"
      :pagination="pagination">
    </custom-table>
    <!--active变化之后，才会更改整个样式-->
    <el-dialog title="报废详情" center :visible.sync="applyDetailVisible" wdith="100%" :close-on-click-modal="false">
      <el-steps align-center :active="applyStep" finish-status="success" :process-status="processStatus">
        <el-step title="申请报废"></el-step>
        <el-step title="审批"></el-step>
        <el-step title="报废入库"></el-step>
      </el-steps>
      <div v-if="applyStep>=1">
        <h4>审批结果：</h4>
        <custom-table
          :columns="columnDailogApprove"
          :data="applyApproveDetail"
          :tableLoadingFlag="tableLoadingFlag">
        </custom-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getRoleType
  } from '@/utils/token'
  import CustomTable from '@/components/table/CustomTable'
  import {apiGetFactoryScrapDetail, apiGetFactoryScrapList} from '@/api/repairs/factory/index'
  import {parseTime} from '@/utils'
  import {apiDownload} from '@/api/approve/scrap'

  export default {
    components: {
      CustomTable
    },
    created () {
      let listQuery = {
        status: undefined
      }
      this.getFactoryScrapList(listQuery)
    },
    data() {
      return {
        columnDailogApprove: [
          {label: '审批人', name: 'name', width: '100', align: 'center'},
          {label: '审批时间', name: 'time', width: '160', align: 'center', formatter: this.formatTime},
          {label: '审批结果', name: 'result', width: '150', align: 'center', formatter: this.formatStatus},
          {label: '原因', name: 'reason', align: 'center'}
        ],
        columns: [
          {label: 'ID', name: 'id', width: '80', align: 'center'},
          {label: '批次号', name: 'batch', width: '150', align: 'center'},
          {label: 'YSTSN', name: 'ystsn', width: '150', align: 'center'},
          {label: '操作人', name: 'repairer', width: '150', align: 'center'},
          {label: '品牌', name: 'brand', width: '100', align: 'center'},
          {label: '型号', name: 'model', width: '150', align: 'center'},
          {label: '责任归属', name: 'duty', width: '100', align: 'center'},
          {label: '状态', name: 'repairResultStr', width: '100', align: 'center'},
          {label: '报废理由', name: 'reason', align: 'center'}
        ],
        // 表单操作栏
        operationColumn: {
          width: '80',
          operations: [
            {name: '详情', callback: this.getDetailSelfApply},
            {name: '下载附件', callback: this.downloadFile, page: 'scrap'}
          ]
        },
        applicationStatusList: [
          {id: 4, name: '待报废'},
          {id: 5, name: '已报废'},
          {id: 6, name: '未批准'}
        ],
        searchDto: {
          status: '',
          ystsn: ''
        },
        applyDetail: {
          applyTime: 's'
        },
        processStatus: 'wait',
        applyStep: 0,
        applyAuditDetail: [
          {
            name: '',
            time: '',
            result: '',
            reason: ''
          }
        ],
        applyApproveDetail: [
          {
            name: '',
            time: '',
            result: '',
            reason: ''
          }
        ],
        // 申请步骤条默认隐藏
        applyDetailVisible: false,
        tableLoadingFlag: false,
        factoryScrapList: [],
        pagination: this.getData(this.getFactoryScrapList),
        provinceCode: '',
        address: '',
        roleType: getRoleType(),
        listQuery: {
          status: undefined
        }
      }
    },
    methods: {
      searchData() {
        this.listQuery.status = this.searchDto.status
        this.listQuery.ystsn = this.searchDto.ystsn
        this.pagination.currentPage = 1
        this.pagination.pageSize = 10
        this.getFactoryScrapList(this.listQuery)
      },
      formatStatus(row, column, cellValue) {
        if (cellValue === 1) {
          return '不通过'
        }
        return '通过'
      },
      formatTime(row, column, cellValue) {
        return parseTime(cellValue)
      },
      // 获取工厂报废一览
      getFactoryScrapList (listquery) {
        if (this.searchDto.status !== '') {
          listquery.status = this.searchDto.status
        }
        if (this.searchDto.ystsn !== '') {
          listquery.ystsn = this.searchDto.ystsn
        }
        apiGetFactoryScrapList(listquery).then(response => {
          this.factoryScrapList = response.data
          this.pagination.totalRecords = response.totalRecords
          this.tableLoadingFlag = false
        })
      },
      getDetailSelfApply(row) {
        apiGetFactoryScrapDetail(row.id).then(response => {
          if (response.data === undefined || response.data === null) {
            // 已提交申请，待审核
            this.applyStep = 0
            this.processStatus = 'success'
          } else {
            if (response.data.result === 1) {
              this.applyStep = 1
              this.processStatus = 'error'
            } else if (response.data.result === 0) {
              // 判断是否在报废库中，如果SN号存在，则默认已经返还办事处
              if (response.inScrap === true) {
                this.applyStep = 2
                this.processStatus = 'success'
              } else {
                // 激活active
                this.applyStep = 1.1
                this.processStatus = 'success'
              }
            }
          }
          if (this.applyStep >= 1) {
            this.applyApproveDetail[0].name = response.data.name
            this.applyApproveDetail[0].time = response.data.approveDate
            this.applyApproveDetail[0].result = response.data.result
            this.applyApproveDetail[0].reason = response.data.cause
          }
          this.applyDetailVisible = true
        })
      },
      // 下载报废附件(不可修复鉴定表)
      downloadFile (row) {
        let fileNameArr = row.filePath.split('.')
        let paramsPost = {
          id: row.id
        }
        if (fileNameArr[fileNameArr.length - 1] === 'xlsx') {
          apiDownload(paramsPost).then(response => {
            let blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
            window.location.href = URL.createObjectURL(blob)
          }).catch(() => {
          })
        } else if (fileNameArr[fileNameArr.length - 1] === 'zip') {
          apiDownload(paramsPost).then(response => {
            let blob = new Blob([response.data], {type: 'application/x-zip-compressed'})
            window.location.href = URL.createObjectURL(blob)
          }).catch(() => {
          })
        }
      },
    }
  }
</script>
